<template>
  <!-- left 组件 -->
  <div class="left">
    <ul>
      <li :class="{active:xiabiao == index}" v-for="(item,index) in shoppingArr" :key="index" @click='qiehuan(index)'> {{item.title}} </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['shoppingArr', 'xiabiao'],
  methods: {
    qiehuan(index) {
      this.$emit('qiehuan', index)
    }
  },
}
</script>

<style lang='scss' scoped>
 .left {
  width: 20%;
  // height: 610px;
  // background-color: aqua;
  ul {
    width: 100%;
    height: 100%;
    // display: flex;

    li {
      width: 100%;
      height: 12%;
      padding-bottom: 8px;
      // background-color: antiquewhite;
      margin-bottom: 8px;
      text-align: center;
      line-height: 80px;
      // border-left: 2px solid transparent;
      border-bottom: 1px solid gray;
    }
  }
}
</style>